import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// 要允许在.vue文件中使用除`ts`以外的其他语言，请取消注释以下行：
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// 更多信息请访问：https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  // 配置1：定义要检查的文件范围
  {
    name: 'app/files-to-lint', // 配置名称，用于标识
    files: ['**/*.{ts,mts,tsx,vue}'], // 匹配所有TypeScript和Vue文件
  },

  // 配置2：全局忽略的文件和目录
  globalIgnores([
    '**/dist/**', // 忽略构建输出目录
    '**/dist-ssr/**', // 忽略SSR构建目录
    '**/coverage/**', // 忽略测试覆盖率目录
    '**/mock/**', // 忽略mockjs目录
  ]),

  // 配置3：Vue.js基础规则配置
  pluginVue.configs['flat/essential'], // 应用Vue.js必要的语法检查规则

  // 配置4：TypeScript推荐规则配置
  vueTsConfigs.recommended, // 应用Vue + TypeScript推荐的检查规则

  // 配置5：禁用与Prettier冲突的格式化规则
  skipFormatting, // 避免ESLint与Prettier在代码格式化上产生冲突

  // 配置6：自定义Vue组件命名规则
  {
    name: 'vue/custom-rules', // 自定义规则配置名称
    rules: {
      // 强制使用多单词组件名称
      // 避免使用单个单词作为组件名，防止与HTML原生元素冲突, 但是太多了不想改临时禁用下  默认是error报错，可以修改成  warn 还会有提示但不是强制，  off关闭提示
      'vue/multi-word-component-names': 'off',
    },
  },
)
